<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网格列表管理 - 用户地址数据系统</title>
    <link rel="stylesheet" href="relation-styles.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <script src="frame-integration.js"></script>
    <style>
        .filter-section {
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
            padding: 20px;
            margin-bottom: 25px;
        }
        
        .filter-form {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            margin-bottom: 15px;
        }
        
        .filter-item {
            flex: 1;
            min-width: 200px;
        }
        
        .filter-label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
            color: #333;
        }
        
        .filter-actions {
            display: flex;
            justify-content: flex-end;
            gap: 10px;
            margin-top: 20px;
        }
        
        .grid-list {
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
            overflow: hidden;
            margin-bottom: 25px;
        }
        
        .list-header {
            background-color: #f5f7fa;
            padding: 15px 25px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .list-title {
            font-size: 18px;
            font-weight: 500;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .grid-table {
            width: 100%;
            border-collapse: collapse;
        }
        
        .grid-table th,
        .grid-table td {
            padding: 12px 15px;
            text-align: left;
            border-bottom: 1px solid #eee;
        }
        
        .grid-table th {
            background-color: #f9fafb;
            color: #707070;
            font-weight: 500;
            font-size: 14px;
        }
        
        .grid-table tr:last-child td {
            border-bottom: none;
        }
        
        .status-active {
            background-color: #e8f5e9;
            color: #4caf50;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 12px;
            font-weight: 500;
        }
        
        .status-inactive {
            background-color: #ffebee;
            color: #f44336;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 12px;
            font-weight: 500;
        }
        
        .pagination {
            display: flex;
            justify-content: center;
            margin-top: 20px;
            gap: 5px;
        }
        
        .page-item {
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid #e0e0e0;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
        }
        
        .page-item.active {
            background-color: #2196f3;
            color: white;
            border-color: #2196f3;
        }
        
        .page-item:hover:not(.active) {
            background-color: #f5f5f5;
        }
        
        /* 弹窗样式 */
        .modal {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.5);
        }
        
        .modal-content {
            background-color: white;
            margin: 5% auto;
            padding: 25px;
            border-radius: 8px;
            width: 80%;
            max-width: 700px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        }
        
        .modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 1px solid #eee;
        }
        
        .modal-title {
            font-size: 20px;
            font-weight: 500;
        }
        
        .close-modal {
            font-size: 24px;
            cursor: pointer;
        }
        
        .form-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
        }
        
        .form-group {
            margin-bottom: 15px;
        }
        
        .form-label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
            color: #333;
        }
        
        .form-control {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        
        .modal-footer {
            display: flex;
            justify-content: flex-end;
            gap: 15px;
            margin-top: 25px;
            padding-top: 15px;
            border-top: 1px solid #eee;
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <div class="title-section">
                <h1>网格列表管理</h1>
                <p class="subtitle">管理系统中所有网格及其区域划分</p>
            </div>
            <div class="header-actions">
                <button class="btn btn-primary" onclick="openAddGridModal()">
                    <i class="fas fa-plus-circle"></i> 新增网格
                </button>
            </div>
        </header>
        
        <!-- 筛选区域 -->
        <div class="filter-section">
            <div class="filter-form">
                <div class="filter-item">
                    <label class="filter-label">网格名称</label>
                    <input type="text" class="form-control" placeholder="请输入网格名称">
                </div>
                <div class="filter-item">
                    <label class="filter-label">所在区</label>
                    <select class="form-control" id="district-select" onchange="loadStreets()">
                        <option value="">全部</option>
                        <option value="历下区">历下区</option>
                        <option value="市中区">市中区</option>
                        <option value="槐荫区">槐荫区</option>
                        <option value="天桥区">天桥区</option>
                    </select>
                </div>
                <div class="filter-item">
                    <label class="filter-label">所在街道</label>
                    <select class="form-control" id="street-select">
                        <option value="">全部</option>
                    </select>
                </div>
                <div class="filter-item">
                    <label class="filter-label">状态</label>
                    <select class="form-control">
                        <option value="">全部</option>
                        <option value="active">启用</option>
                        <option value="inactive">停用</option>
                    </select>
                </div>
            </div>
            <div class="filter-actions">
                <button class="btn btn-default" onclick="resetFilters()">
                    <i class="fas fa-undo"></i> 重置
                </button>
                <button class="btn btn-primary" onclick="searchGrids()">
                    <i class="fas fa-search"></i> 查询
                </button>
            </div>
        </div>
        
        <!-- 网格列表 -->
        <div class="grid-list">
            <div class="list-header">
                <div class="list-title">
                    <i class="fas fa-th"></i> 网格列表
                </div>
                <div>共 <span class="text-primary">42</span> 个网格</div>
            </div>
            <table class="grid-table">
                <thead>
                    <tr>
                        <th width="20%">网格名称</th>
                        <th width="15%">网格编号</th>
                        <th width="25%">所属区域</th>
                        <th width="10%">网格员数</th>
                        <th width="10%">地址数量</th>
                        <th width="10%">状态</th>
                        <th width="10%">操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>泉城路A网格</td>
                        <td>GR001</td>
                        <td>历下区-泉城路街道</td>
                        <td>3</td>
                        <td>126</td>
                        <td><span class="status-active">启用</span></td>
                        <td>
                            <button class="action-btn btn-view" onclick="viewGridDetail('001')">查看</button>
                            <button class="action-btn btn-edit" onclick="openEditGridModal('001')">编辑</button>
                        </td>
                    </tr>
                    <tr>
                        <td>泉城路B网格</td>
                        <td>GR002</td>
                        <td>历下区-泉城路街道</td>
                        <td>2</td>
                        <td>98</td>
                        <td><span class="status-active">启用</span></td>
                        <td>
                            <button class="action-btn btn-view" onclick="viewGridDetail('002')">查看</button>
                            <button class="action-btn btn-edit" onclick="openEditGridModal('002')">编辑</button>
                        </td>
                    </tr>
                    <tr>
                        <td>解放路A网格</td>
                        <td>GR003</td>
                        <td>历下区-解放路街道</td>
                        <td>3</td>
                        <td>145</td>
                        <td><span class="status-active">启用</span></td>
                        <td>
                            <button class="action-btn btn-view" onclick="viewGridDetail('003')">查看</button>
                            <button class="action-btn btn-edit" onclick="openEditGridModal('003')">编辑</button>
                        </td>
                    </tr>
                    <tr>
                        <td>千佛山西网格</td>
                        <td>GR004</td>
                        <td>历下区-千佛山街道</td>
                        <td>2</td>
                        <td>78</td>
                        <td><span class="status-inactive">停用</span></td>
                        <td>
                            <button class="action-btn btn-view" onclick="viewGridDetail('004')">查看</button>
                            <button class="action-btn btn-edit" onclick="openEditGridModal('004')">编辑</button>
                        </td>
                    </tr>
                    <tr>
                        <td>大观园北网格</td>
                        <td>GR005</td>
                        <td>市中区-大观园街道</td>
                        <td>4</td>
                        <td>167</td>
                        <td><span class="status-active">启用</span></td>
                        <td>
                            <button class="action-btn btn-view" onclick="viewGridDetail('005')">查看</button>
                            <button class="action-btn btn-edit" onclick="openEditGridModal('005')">编辑</button>
                        </td>
                    </tr>
                </tbody>
            </table>
            
            <!-- 分页 -->
            <div class="pagination">
                <div class="page-item"><i class="fas fa-angle-left"></i></div>
                <div class="page-item active">1</div>
                <div class="page-item">2</div>
                <div class="page-item">3</div>
                <div class="page-item">4</div>
                <div class="page-item">5</div>
                <div class="page-item"><i class="fas fa-angle-right"></i></div>
            </div>
        </div>
    </div>
    
    <!-- 新增网格弹窗 -->
    <div id="addGridModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <div class="modal-title">新增网格</div>
                <span class="close-modal" onclick="closeAddGridModal()">&times;</span>
            </div>
            <form id="addGridForm">
                <div class="form-grid">
                    <div class="form-group">
                        <label class="form-label">网格名称 <span style="color: red">*</span></label>
                        <input type="text" class="form-control" name="name" required>
                    </div>
                    <div class="form-group">
                        <label class="form-label">网格编号 <span style="color: red">*</span></label>
                        <input type="text" class="form-control" name="code" required>
                    </div>
                    <div class="form-group">
                        <label class="form-label">所在区 <span style="color: red">*</span></label>
                        <select class="form-control" name="district" id="add-district-select" onchange="loadAddStreets()" required>
                            <option value="">请选择</option>
                            <option value="历下区">历下区</option>
                            <option value="市中区">市中区</option>
                            <option value="槐荫区">槐荫区</option>
                            <option value="天桥区">天桥区</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label class="form-label">所在街道 <span style="color: red">*</span></label>
                        <select class="form-control" name="street" id="add-street-select" required>
                            <option value="">请选择</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label class="form-label">状态</label>
                        <select class="form-control" name="status">
                            <option value="active">启用</option>
                            <option value="inactive">停用</option>
                        </select>
                    </div>
                </div>
                
                <div class="form-group">
                    <label class="form-label">网格描述</label>
                    <textarea class="form-control" name="description" rows="3"></textarea>
                </div>
                
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" onclick="closeAddGridModal()">取消</button>
                    <button type="submit" class="btn btn-primary">确认添加</button>
                </div>
            </form>
        </div>
    </div>
    
    <!-- 编辑网格弹窗 -->
    <div id="editGridModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <div class="modal-title">编辑网格</div>
                <span class="close-modal" onclick="closeEditGridModal()">&times;</span>
            </div>
            <form id="editGridForm">
                <input type="hidden" id="edit-grid-id" name="id">
                <div class="form-grid">
                    <div class="form-group">
                        <label class="form-label">网格名称 <span style="color: red">*</span></label>
                        <input type="text" class="form-control" name="name" id="edit-name" required>
                    </div>
                    <div class="form-group">
                        <label class="form-label">网格编号 <span style="color: red">*</span></label>
                        <input type="text" class="form-control" name="code" id="edit-code" required>
                    </div>
                    <div class="form-group">
                        <label class="form-label">所在区 <span style="color: red">*</span></label>
                        <select class="form-control" name="district" id="edit-district-select" onchange="loadEditStreets()" required>
                            <option value="">请选择</option>
                            <option value="历下区">历下区</option>
                            <option value="市中区">市中区</option>
                            <option value="槐荫区">槐荫区</option>
                            <option value="天桥区">天桥区</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label class="form-label">所在街道 <span style="color: red">*</span></label>
                        <select class="form-control" name="street" id="edit-street-select" required>
                            <option value="">请选择</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label class="form-label">状态</label>
                        <select class="form-control" name="status" id="edit-status">
                            <option value="active">启用</option>
                            <option value="inactive">停用</option>
                        </select>
                    </div>
                </div>
                
                <div class="form-group">
                    <label class="form-label">网格描述</label>
                    <textarea class="form-control" name="description" id="edit-description" rows="3"></textarea>
                </div>
                
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" onclick="closeEditGridModal()">取消</button>
                    <button type="submit" class="btn btn-primary">保存修改</button>
                </div>
            </form>
        </div>
    </div>

    <script>
        // 街道数据（实际项目中应该从API获取）
        const streetData = {
            '历下区': ['泉城路街道', '解放路街道', '千佛山街道', '趵突泉街道', '文东街道', '龙洞街道'],
            '市中区': ['大观园街道', '杆石桥街道', '四里村街道', '王官庄街道', '舜玉路街道', '魏家庄街道'],
            '槐荫区': ['匡山街道', '振兴街街道', '美里湖街道', '段店北路街道', '张庄街道', '营市街街道'],
            '天桥区': ['北园街道', '无影山街道', '天桥东街街道', '南村街道', '堤口路街道', '制锦市街道']
        };
        
        // 根据所选区加载街道
        function loadStreets() {
            const district = document.getElementById('district-select').value;
            const streetSelect = document.getElementById('street-select');
            
            // 清空现有选项
            streetSelect.innerHTML = '<option value="">全部</option>';
            
            if (district && streetData[district]) {
                streetData[district].forEach(street => {
                    const option = document.createElement('option');
                    option.value = street;
                    option.textContent = street;
                    streetSelect.appendChild(option);
                });
            }
        }
        
        // 新增模态框的街道加载
        function loadAddStreets() {
            const district = document.getElementById('add-district-select').value;
            const streetSelect = document.getElementById('add-street-select');
            
            // 清空现有选项
            streetSelect.innerHTML = '<option value="">请选择</option>';
            
            if (district && streetData[district]) {
                streetData[district].forEach(street => {
                    const option = document.createElement('option');
                    option.value = street;
                    option.textContent = street;
                    streetSelect.appendChild(option);
                });
            }
        }
        
        // 编辑模态框的街道加载
        function loadEditStreets() {
            const district = document.getElementById('edit-district-select').value;
            const streetSelect = document.getElementById('edit-street-select');
            
            // 清空现有选项
            streetSelect.innerHTML = '<option value="">请选择</option>';
            
            if (district && streetData[district]) {
                streetData[district].forEach(street => {
                    const option = document.createElement('option');
                    option.value = street;
                    option.textContent = street;
                    streetSelect.appendChild(option);
                });
            }
        }
        
        // 重置筛选条件
        function resetFilters() {
            const filterForm = document.querySelector('.filter-form');
            const inputs = filterForm.querySelectorAll('input, select');
            
            inputs.forEach(input => {
                if (input.type === 'text') {
                    input.value = '';
                } else if (input.tagName === 'SELECT') {
                    input.selectedIndex = 0;
                }
            });
            
            // 清空街道选择
            document.getElementById('street-select').innerHTML = '<option value="">全部</option>';
        }
        
        // 搜索网格
        function searchGrids() {
            const name = document.querySelector('.filter-form input[placeholder="请输入网格名称"]').value.trim();
            const district = document.getElementById('district-select').value;
            const street = document.getElementById('street-select').value;
            const status = document.querySelector('.filter-form select:last-child').value;
            
            console.log('搜索条件:', { name, district, street, status });
            
            // 实际项目中，这里应该调用API进行搜索
            alert('搜索功能正在开发中');
        }
        
        // 打开新增网格弹窗
        function openAddGridModal() {
            document.getElementById('addGridModal').style.display = 'block';
            document.getElementById('addGridForm').reset();
        }
        
        // 关闭新增网格弹窗
        function closeAddGridModal() {
            document.getElementById('addGridModal').style.display = 'none';
        }
        
        // 打开编辑网格弹窗
        function openEditGridModal(gridId) {
            document.getElementById('editGridModal').style.display = 'block';
            document.getElementById('edit-grid-id').value = gridId;
            
            // 实际项目中，这里应该调用API获取网格详情并填充表单
            // 这里模拟一些数据
            if (gridId === '001') {
                document.getElementById('edit-name').value = '泉城路A网格';
                document.getElementById('edit-code').value = 'GR001';
                document.getElementById('edit-district-select').value = '历下区';
                loadEditStreets();
                setTimeout(() => {
                    document.getElementById('edit-street-select').value = '泉城路街道';
                }, 100);
                document.getElementById('edit-status').value = 'active';
                document.getElementById('edit-description').value = '泉城路街道东部片区';
            } else {
                // 其他网格信息可以根据ID来模拟
                alert('获取网格信息功能正在开发中');
            }
        }
        
        // 关闭编辑网格弹窗
        function closeEditGridModal() {
            document.getElementById('editGridModal').style.display = 'none';
        }
        
        // 表单提交处理
        document.getElementById('addGridForm').addEventListener('submit', function(event) {
            event.preventDefault();
            const formData = new FormData(this);
            const data = Object.fromEntries(formData.entries());
            
            console.log('新增网格数据:', data);
            // 实际项目中，这里应该调用API保存网格信息
            alert('新增网格功能正在开发中');
            closeAddGridModal();
        });
        
        document.getElementById('editGridForm').addEventListener('submit', function(event) {
            event.preventDefault();
            const formData = new FormData(this);
            const data = Object.fromEntries(formData.entries());
            
            console.log('编辑网格数据:', data);
            // 实际项目中，这里应该调用API更新网格信息
            alert('编辑网格功能正在开发中');
            closeEditGridModal();
        });
        
        // 页面加载完成后执行初始化
        document.addEventListener('DOMContentLoaded', function() {
            console.log('网格列表管理页面加载完成');
        });
        
        // 修改查看网格详情的跳转方式
        function viewGridDetail(gridId) {
            window.location.href = 'grid-detail.html?id=' + gridId;
        }
        
        // 修改返回的跳转方式
        function backToMain() {
            window.location.href = 'main.html';
        }
    </script>
</body>
</html>